<template>
  <div>
    <div>
      <table border="1" cellspacing="0">
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>操作</th>
        </tr>
        <tr v-for="cate in catelist">
          <td>{{ cate.id }}</td>
          <td>{{ cate.name }}</td>
          <td>
            <input type="button" value="删除" @click="delcate(cate.id)">
            <router-link :to="{name:'Upd',params:{'id':cate.id}}">修改</router-link>
          </td>
        </tr>
      </table>
    </div>
    <br>
    <div>
      New Cate:<input type="text" v-model="cate">
      <input type="button" @click="addcate" value="添加分类">
    </div>
  </div>
</template>

<script>
  export default {
    name: "Index",
    data: function () {
      return {
        catelist: [],
        cate: ''
      }
    },
    methods: {
      addcate() {
        this.axios({
          url: 'http://localhost:8000/myapp/cate/',
          method: 'post',
          data: {'name': this.cate}
        }).then(res => {
          console.log(res.data)
          this.getcate()
        })
      },
      getcate() {
        this.axios({
          url: 'http://localhost:8000/myapp/cate/',
          method: 'get',
        }).then(res => {
          console.log(res.data);
          this.catelist = res.data.data
        })
      },
      delcate(cateid) {
        this.axios({
          url: 'http://localhost:8000/myapp/cate/',
          method: 'delete',
          data: {'cid': cateid}
        }).then(res => {
          alert(res.data.data);
          this.getcate()
        })
      }
    },
    mounted() {
      this.axios({
        url: 'http://localhost:8000/myapp/yanz/',
        method: 'post',
        data: {'token': sessionStorage.getItem('token')}
      }).then(res => {
        if (res.data.code === 200) {
          alert(res.data.data);
          this.getcate()
        } else {
          alert(res.data.data);
          this.$router.push({name: 'Login'})
        }
      })
    }
  }
</script>

<style scoped>

</style>
